<template>
	<view class="myInvitation-container">
		<view class="u-flex myInvitation-header">
			<view class="u-flex u-flex-between u-flex-items-end m-b-20 header-invite">
				<view class="invite-cont">
					<view class="invite-num">{{userInvite.income}}</view>
					<text class="invite-lable">我的收益</text>
				</view>
				<view class="invite-cont invite-cont-segment">
					<view class="invite-num">{{userInvite.memberNum}}</view>
					<text class="invite-lable">我的团员</text>
				</view>
				<view class="invite-cont">
					<view class="invite-num">{{userInvite.memberOrderNum}}</view>
					<text class="invite-lable">团员订单</text>
				</view>
			</view>
		</view>

		<view class="invite-reward m-b-20">
			<view class="u-flex u-flex-between">
				<text class="personalcenter-card-title">团长邀请成员下单</text>
			</view>
			<view class="u-flex reward-money-content m-t-10">
				<view class="reward-money">

					<view class="money-num">+{{userLevelMoney.one}}</view>
					<view class="money-lable">首单奖励</view>
				</view>
				<view class="reward-money">
					<view class="money-num">+{{userLevelMoney.two}}</view>
					<view class="money-lable">第二单奖励</view>
				</view>
				<view class="reward-money">
					<view class="money-num">+{{userLevelMoney.three}}</view>
					<view class="money-lable">第三单奖励</view>
				</view>
				<view class="reward-money">
					<view class="money-num">{{userLevelMoney.follow}}</view>
					<view class="money-lable">后续每单</view>
				</view>
			</view>

			<view class="m-t-20">
				<u-button type="primary" hairline="false" shape="circle" text="立即邀请" color="#FF5151"
					@tap="toPageJump('inviteMerchant')"></u-button>
			</view>
		</view>


		<view class="pgang-list m-t-20 u-p-t-20">
			<view class="u-flex m-b-20">
				<text class="personalcenter-card-title">我的团员({{listData.length}}个)</text>
			</view>

			<view class="pgang-list-content">
				<view class="u-flex u-flex-between u-flex-items-center pgang-list-item m-b-20" v-for="item in listData"
					:key="item">
					<up-avatar size="120rpx" :src="item.avatar ?item.avatar: getimageUrl('user-p.png')"></up-avatar>
					<view class="list-item-cont m-t-10">
						<view class="u-flex u-flex-between m-b-10">
							<text class="list-phone">{{item.phone}}</text>
							<text class="list-order">已下{{item.ordersNum}}单</text>
						</view>
						<text class="list-time">注册时间：{{item.createTime}}</text>
					</view>
				</view>

				<u-empty marginTop="50rpx" v-if="!listData.length" :icon="getimageUrl('empty-user.png')"></u-empty>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, unref } from "vue";
	import { onLoad, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { queryUserLevel, listMember } from '@/common/mine.api';
	import { getimageUrl } from '@/util/util.js';

	let listData = ref([])

	let userLevelMoney = ref({
		one: '', two: '', three: '', follow: ''
	})

	function classListTypeBg(type) {
		var genderMap = {
			'1': {
				one: '2元', two: '3元', three: '4元', follow: '最高5元',
			},
			'2': {
				one: '2元', two: '3元', three: '5元', follow: '最高5元',
			},
			'3': {
				one: '3元', two: '4元', three: '5元', follow: '最高5元',
			},
			'4': {
				one: '4元', two: '5元', three: '6元', follow: '最高6元',
			},
			'5': {
				one: '5元', two: '6元', three: '7元', follow: '最高7元',
			},
			'6': {
				one: '6元', two: '7元', three: '8元', follow: '最高8元',
			},
			'7': {
				one: '7元', two: '8元', three: '9元', follow: '最高9元',
			},
		};
		return genderMap[type]
	}

	const userInvite = ref({
		income: 0,
		memberNum: 0,
		memberOrderNum: 0
	})

	const state = reactive({
		filtrate: {
			pageNo: 1,
			pageSize: 10,
			businessType: null,
			burseId: 0,
		},
		loadStatus: 'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
		isLoadMore: false,  //是否加载中
	})

	function toPageJump(type) {
		var genderMap = {
			'inviteMerchant': '/pages/personalCenter/inviteMerchant',
		};

		uni.navigateTo({
			url: genderMap[type]
		});
	}

	onLoad(async (option) => {
		userInvite.value.income = option.income
		userInvite.value.memberNum = option.memberNum
		userInvite.value.memberOrderNum = option.memberOrderNum
		getList()
		let res = await queryUserLevel()
		userLevelMoney.value = classListTypeBg(res)
	})


	async function getList() {
		const result = await listMember(state.filtrate)
		if (result.records.length !== 0) {
			listData.value = listData.value.concat(result.records)
			if (listData.value.length === result.total) {
				state.isLoadMore = true
				state.loadStatus = 'nomore'
			} else {
				state.isLoadMore = false
			}
		} else {
			state.isLoadMore = true
			state.loadStatus = 'nomore'
		}
	}

	//上拉触底函数
	onReachBottom(() => {
		if (!state.isLoadMore) {  //此处进行判断上锁，防止重复请求
			state.isLoadMore = true
			state.filtrate.pageNo += 1//页数加1
			getList()
		}
	})

	// 上拉刷新
	onPullDownRefresh(() => {
		//重新触发获取数据方法，刷新接口
		listData.value = []
		state.filtrate.pageNo = 1
		getList()
		//结束刷新
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
	.myInvitation-container {
		position: relative;
		padding-top: 230rpx;
		margin-bottom: 10rpx;

		.myInvitation-header {
			top: 0;
			width: calc(100% - 40rpx);
			padding: 80rpx 20rpx 130rpx 20rpx;
			background: linear-gradient(135deg, #FF1E12 0%, rgba(254, 121, 27, 0.8) 100%);
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;

			.header-invite {
				width: 100%;

				.invite-cont {
					width: 30%;
					text-align: center;
					position: relative;

					.invite-num {
						font-size: 54rpx;
						font-weight: 700;
					}

					.invite-lable {
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.invite-cont-segment::before {
					position: absolute;
					content: "";
					width: 2rpx;
					height: 30rpx;
					background: #FFFFFF;
					top: 25%;
					right: -1rpx;
					border-radius: 3px;
				}

				.invite-cont-segment::after {
					position: absolute;
					content: "";
					width: 2rpx;
					height: 30rpx;
					background: #FFFFFF;
					top: 25%;
					left: -1rpx;
					border-radius: 3px;
				}
			}
		}

		.personalcenter-card-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.invite-reward {
			background: #FFFFFF;
			position: relative;
			z-index: 20;
			border-radius: 12rpx;
			padding: 40rpx;
			margin: 0 20rpx;

			.reward-money-content {
				position: relative;
				left: -1%;
				width: 102%;

				.reward-money {

					margin: 10rpx 0;
					padding: 10rpx;
					text-align: center;
					width: calc(25% - 20rpx);
					background: url('http://qianxueapplet.suoeryun.com/world_benefits_user/invitation-bg.png') no-repeat;
					background-size: cover;
					background-position: center center;

					.money-num {
						font-size: 28rpx;
						font-weight: 400;
						color: #F54629;
						padding: 20rpx 20rpx;
						margin: 25rpx 0;
					}

					.money-lable {
						padding: 10rpx;
						margin: 10rpx 20rpx;
						font-size: 17rpx;
						font-weight: 400;
						color: #CB511E;
						background: linear-gradient(180deg, #FFF5E6 0%, #FFE8C9 100%);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}
			}
		}

		.pgang-list {
			padding: 0 20rpx;

			.pgang-list-item {
				background: #FFFFFF;
				padding: 20rpx;

				.list-item-cont {
					color: #333333;
					padding-left: 20rpx;
					width: calc(100% - 120rpx);

					.list-phone {
						font-size: 28rpx;
						font-weight: 500;
					}

					.list-order {
						font-size: 26rpx;
						font-weight: 400;
					}

					.list-time {
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}
		}

	}
</style>